<template>
  <div class="mod-config order">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
      <el-form-item>
        <el-input v-model="dataForm.order_sn" placeholder="订单单号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.special_id" placeholder="会员码" clearable></el-input>
      </el-form-item>
      <el-form-item >
        <el-button @click="currentChangeHandle(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        prop="signStatus"
        header-align="center"
        align="center"
        width="60"
        label="标记">

        <template slot-scope="scope">
          <el-popover
            placement="right"
            width="50"
            v-model="visible[scope.row.orderId]"
            trigger="click">
            <div>
              <ul class="color-list-ul" style="display: flex;">
                <li class="white el-tag" @click="changeBiaoji(scope.row.orderId,0)" sign_status="0" title="取消"></li>
                <li class="red el-tag" @click="changeBiaoji(scope.row.orderId,1)" sign_status="1" title="红"></li>
                <li class="blue el-tag" @click="changeBiaoji(scope.row.orderId,2)" sign_status="2" title="蓝"></li>
                <li class="green el-tag" @click="changeBiaoji(scope.row.orderId,3)" sign_status="3" title="绿"></li>
                <li class="yellow el-tag" @click="changeBiaoji(scope.row.orderId,4)" sign_status="4" title="黄"></li>
              </ul>
            </div>
            <el-tag slot="reference"  v-if="scope.row.signStatus === 0" class="biaoji"></el-tag>
            <el-tag slot="reference"  v-if="scope.row.signStatus === 1" class="biaoji b1"></el-tag>
            <el-tag slot="reference"  v-if="scope.row.signStatus === 2" class="biaoji b2"></el-tag>
            <el-tag slot="reference"  v-if="scope.row.signStatus === 3" class="biaoji b3"></el-tag>
            <el-tag slot="reference"  v-if="scope.row.signStatus === 4" class="biaoji b4"></el-tag>
          </el-popover>
        </template>


      </el-table-column>
      <el-table-column
        prop="orderSn"
        header-align="center"
        align="center"
        min-width="170"
        label="订单编号">
        <template slot-scope="scope">
          <span class="el-button--text"  style="cursor: pointer" @click="getPackage(scope.row.orderId)">{{scope.row.orderSn}}</span>
          <el-dialog lock-scroll append-to-body custom-class="dialogcls" title="包裹信息" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
              <el-table-column align="center" min-width="220" property="inTrackingNumber" label="国内快递单号" width="150"></el-table-column>
              <el-table-column align="center" property="shipping" label="快递公司 	" width="200"></el-table-column>
              <el-table-column align="center" property="weight" label="重量(kg)"></el-table-column>
              <el-table-column align="center" min-width="150" property="addTime" label="入库时间"></el-table-column>
            </el-table>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column
        prop="specialId"
        header-align="center"
        align="center"
        min-width="80"
        label="会员码">
      </el-table-column>
      <el-table-column
        prop="addTimeStr"
        header-align="center"
        align="center"
        min-width="160"
        label="添加时间">
      </el-table-column>
      <el-table-column
        prop="postscript"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="100"
        label="备注">
        <template slot-scope="scope">
          <el-button v-if="scope.row.postscript==''&&scope.row.adminnote==''" type="text" size="small" @click="addNoteMethod(scope.row.orderId)">添加备注</el-button>
          <el-tooltip placement="top" v-if="scope.row.postscript!=''||scope.row.adminnote!=''">
            <div  slot="content" v-html="getNote(scope.row.adminnote,scope.row.postscript)"></div>
            <div  @click="addNoteMethod(scope.row.orderId)" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer">{{scope.row.postscript||scope.row.adminnote}}</div>
          </el-tooltip>
        </template>
        <el-dialog width="500px" lock-scroll append-to-body title="添加备注" :visible.sync="dialogFormVisible">
          <el-form label-width="0px" :model="dataForm">
            <el-form-item>
              <el-input type="textarea" v-model.trim="dataForm.note" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveNote()">确 定</el-button>
          </div>
        </el-dialog>
      </el-table-column>
      <el-table-column
        prop="fastOuthouse"
        header-align="center"
        align="center"
        min-width="50"
        label="快速出库">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.fastOuthouse === 0" size="small" >否</el-tag>
          <el-tag v-else size="small" type="danger">是</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="shippingStatus"
        header-align="center"
        align="center"
        min-width="90"
        label="快递状态">
        <template slot-scope="scope">
          <el-tag style="cursor: pointer" v-if="scope.row.shippingStatus === 0" size="small" type="danger">等待发货</el-tag>
          <el-tag style="cursor: pointer" v-if="scope.row.shippingStatus === 8" size="small" type="info">暂加</el-tag>
          <el-tag style="cursor: pointer" @click="getKuaidiStatus(scope.row.shippingCode,scope.row.outTrackingNumber)" v-if="scope.row.shippingStatus === 1" size="small">在途</el-tag>
          <el-tag style="cursor: pointer" @click="getKuaidiStatus(scope.row.shippingCode,scope.row.outTrackingNumber)" v-if="scope.row.shippingStatus === 4" size="small" type="success">妥协</el-tag>

        </template>
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        header-align="center"
        align="center"
        min-width="90"
        label="支付状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus === 0" size="small" type="danger">未打包</el-tag>
          <el-tag v-if="scope.row.orderStatus === 1" size="small">已打包</el-tag>
          <el-tag v-if="scope.row.orderStatus === 2" size="small" type="success">已支付</el-tag>
        </template>
      </el-table-column>



      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="160"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.orderId)">发货</el-button>
          <el-button v-if="scope.row.orderStatus==1" type="text" size="small" @click="xianxiapayHandle(scope.row.orderId)">线下付款</el-button>
          <el-button type="text" size="small" @click="edit(scope.row.orderId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <xianxiapay v-if="xianxiapayVisible" ref="xianxiapay" @refreshDataList="getDataList"></xianxiapay>
    <editorder v-if="editorderVisible" ref="editorder" @refreshDataList="getDataList"></editorder>
  </div>
</template>

<script>
  import AddOrUpdate from './v9packing-add-or-update'
  import xianxiapay from './xianxiapay'
  import editorder from './editorder'

  export default {
    data() {
      return {
        activities:[],
        noteOrderId:0,
        dialogFormVisible: false,
        dialogTableVisible:false,
        xianxiapayVisible:false,
        editorderVisible:false,
        gridData: [],
        dataForm: {
          order_sn:'',
          special_id: '',
          order_status:0,
          note:''
        },
        options: [{
          value: 0,
          label: '入库成功'
        }, {
          value: 1,
          label: '出库成功'
        }],
        value:'',
        visible:{},
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        fenbaoVisible:false,
        iszan:false,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: ''
      }
    },
    components: {
      AddOrUpdate,
      xianxiapay,
      editorder
    },
    activated() {
      this.getDataList()
    },
    methods: {
      saveNote(){
        let note=this.dataForm.note
        if(typeof (note)=='undefined'||note=='')return false
        this.dialogFormVisible = false
        let orderId=this.noteOrderId
        if(note=='')return false
        this.$http({
          url: this.$http.adornUrl('/order/v9order/savenote'),
          method: 'get',
          params: this.$http.adornParams({
            'order_id': orderId,
            'note':note
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })

      },
      addNoteMethod(val){
        this.dialogFormVisible = true
        this.noteOrderId=val
        this.dataForm.note=''
      },
      getNote(val1,val2){
        if(val1==null||val2==null)return false
        val1=val1.replace(/#/g,"<br/>")
        val2=val2.replace(/#/g,"<br/>")
        if(val1.trim()!=''&&val2.trim()!=''){
          return val2+'<hr/>'+val1
        }else{
          return val2+val1
        }

      },
      getPackage(orderid){
        this.dialogTableVisible=true;
        this.activities=[];
        this.gridData=[];
        this.$http({
          url: this.$http.adornUrl('/package_storage/v9packagestorage/getPackage'),
          method: 'get',
          params: this.$http.adornParams({
            'order_id': orderid
          })
        }).then(({data}) => {
          if (data) {
            console.log(data)
            this.gridData=data
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      changeBiaoji: function (id,val) {
        this.visible[id]=false;
        this.$http({
          url: this.$http.adornUrl('/order/v9order/changeBiaoji'),
          method: 'get',
          params: this.$http.adornParams({
            'order_id': id,
            'status':val
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })

      },
      zankai: function () {
        this.iszan=!this.iszan;
      },
      formatWeight: function (row, column) {
        return row.weightStr = parseFloat(row.weight).toFixed(1) + 'kg';
      },
      formatTime: function (row, column) {
        return row.addTimeStr = this.timestampToTime(row.addTime);
      },
      timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y + M + D + h + m + s;
      },

      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/order/v9order/listoutstore'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'order_sn': this.dataForm.order_sn,
            'special_id':this.dataForm.special_id,
            'order_status':this.dataForm.order_status,
            'detain':1
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      edit(id) {
        this.editorderVisible = true
        this.$nextTick(() => {
          this.$refs.editorder.init(id)
        })
      },
      xianxiapayHandle(id) {
        this.xianxiapayVisible = true
        this.$nextTick(() => {
          this.$refs.xianxiapay.init(id)
        })
      },
      fenbao(id) {
        this.fenbaoVisible = true
        this.$nextTick(() => {
          this.$refs.fenbao.init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.orderId
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/order/v9order/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>
<style lang="scss">
  .order .zankai {
    cursor: pointer;
    margin-left: 10px;
  }
  .order .el-range-separator{
    width: 25px;
  }
  .order .biaoji{
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0;
    background-color: #fff;
    cursor: pointer;
  }
  .order .biaoji.b1{
    background-color: red;
  }
  .order .biaoji.b2{
    background-color: blue;
  }
  .order .biaoji.b3{
    background-color: green;
  }
  .order .biaoji.b4{
    background-color: yellow;
  }
  .color-list-ul li {
    float: left;
    width: 18px;
    height: 18px;
    list-style-type: none;
    margin-left: 5px;
    cursor: pointer;
    padding: 0;
    line-height: 18px;
  }
  .color-list-ul .red {
    width: 18px;
    height: 18px;
    background-color: #E20A0A;
    color: #fff;
    border-radius: 50%;
    border: none;
  }
  .color-list-ul .blue {
    width: 18px;
    height: 18px;
    background-color: blue;
    color: #fff;
    border-radius: 50%;
    border: none;
  }
  .color-list-ul .green {
    width: 18px;
    height: 18px;
    background-color: green;
    color: #fff;
    border-radius: 50%;
  }
  .color-list-ul .yellow {
    width: 18px;
    height: 18px;
    background-color: yellow;
    color: #fff;
    border-radius: 50%;
  }
  .color-list-ul .white {
    background-color: white;
    width: 18px;
    height: 18px;
    color: #fff;
    border-radius: 50%;
  }
  .el-popover.el-popper{
    min-width: 150px;
    padding: 0;
  }
  .color-list-ul{
    display: flex;
    padding: 0;
    justify-content: center;
  }

</style>

